<!--
*** Created by zhumin on 2023/02/12.***
*** Description: "页面顶部组件"
-->
<template>
  <div class="page-top">
    <div class="left-icon">
      <span class="circle">
        <i class="dqicon dq-shezhi2" @click="setting"></i>
      </span>
      <span class="circle" @click="updateData">
        <i class="dqicon dq-shuaxin1"></i>
      </span>
    </div>
    <div class="page-title">击剑成绩采集系统</div>
    <div class="right-icon">
      <span class="circle" @click="changeView()">
        <i class="dqicon dq-quanping"></i>
      </span>
      <span class="circle" @click="gotoReturn">
        <i class="dqicon dq-fanhui1"></i>
      </span>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  created() {},
  mounted() {
    window.addEventListener('keydown', this.keyDown, true) // 监听按键事件
    //浏览器宽高
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        this.fullHeight = window.fullHeight
        window.fullWidth = document.documentElement.clientWidth
        this.fullWidth = window.fullWidth
      })()
    }
    this.screenAll =
      document.fullscreenElement ||
      document.msFullscreenElement ||
      document.mozFullscreenElement ||
      document.webkitFullscreenElement
  },
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight,
      screenAll: false
    }
  },
  watch: {},
  computed: {
    ...mapState({})
  },
  filters: {},
  components: {},
  methods: {
    //系统设置
    setting() {},

    //更新数据
    updateData() {},

    //全屏、缩小屏幕
    showScreen() {},

    //返回上一层
    gotoReturn() {
      this.$router.go(-1)
    },

    keyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false
        this.fullScreen()
      }
    },
    judegFullScreen() {
      // 判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
    changeView() {
      if (this.screenAll) {
        this.exitScreen()
      } else {
        this.fullScreen()
      }
      this.screenAll = !this.screenAll
    },
    //全屏
    fullScreen() {
      const el = document.documentElement
      const rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen
      if (typeof rfs != 'undefined' && rfs) {
        rfs.call(el)
      }
    },
    //退出全屏
    exitScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }
  }
}
</script>
<style scoped lang="less">
.page-top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(#52585e, #44494e, #2c3034);
  text-align: center;
  box-shadow: 0 0 blur 0px rgba(0, 0, 0, 0.2);
  line-height: 50px;
  display: flex;
  .page-title {
    flex: 1;
    font-size: 20px;
    color: #fff;
  }
  .right-icon {
    padding-right: 5px;
  }
  .left-icon {
    padding-left: 5px;
  }
  ::v-deep .dq-shezhi2:before {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
  }
  ::v-deep .dq-shuaxin1:before {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
  }
  ::v-deep .dq-fanhui1:before {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
  }
  ::v-deep .dq-quanping:before {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
  }
  .circle {
    border: 1px solid #666;
    padding: 7px 1px 1px 1px;
    border-radius: 5px;
    margin: 0 5px;
  }
}
</style>
